<template>
  <ContentWrap>
    <!-- 搜索栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="80px"
    >
      <el-form-item label="音频名称" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          placeholder="请输入音频名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标记" prop="mark">
        <el-input
          v-model="queryParams.mark"
          class="!w-240px"
          clearable
          placeholder="请输入标记信息"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button plain v-hasPermi="['resource:meta:auditing']" type="success" @click="unRelease">
          <Icon class="mr-5px" icon="ep:check" />
          取消发布
        </el-button>
        <el-button v-hasPermi="['audio:page:add']" plain type="primary" @click="openAudioUpload">
          <Icon class="mr-5px" icon="ep:upload" />
          音频上传
        </el-button>
        <el-button plain type="danger" @click="handleDelete()" icon="delete">批量删除</el-button>
        <el-button plain type="danger" @click="recycle">
          <Icon class="mr-5px" icon="material-symbols:download" />
          回收站
        </el-button>
        <el-button
          v-if="queryParams.pid"
          plain
          type="warning"
          @click="handleReturn()"
          icon="ArrowLeft"
        >
          返回
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <ContentWrap>
    <el-table :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" label="id" align="center" key="id" prop="id" />
      <el-table-column label="ID" align="center" prop="id" :width="60" />
      <el-table-column label="音频" align="center" prop="url" :width="330">
        <template #default="{ row }">
          <!-- <audio :src="row.url" controls></audio> -->
          <audio v-if="row.ext !== '文件夹'" :src="row.url" controls></audio>
          <div
            v-if="row.ext === '文件夹'"
            @click="handleFolderClick(row)"
            class="document-box"
            title="这是一个文件夹"
          >
            <el-icon><Folder /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="名称" />
      <el-table-column align="center" prop="ext" label="格式" />
      <el-table-column align="center" prop="fileSize" label="大小" />
      <el-table-column align="center" prop="createTime" label="创建日期" />
      <el-table-column align="center" prop="status" label="资源状态">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.RESOURCE_STATUS" :value="scope.row.auditStatus" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <div class="flex items-center justify-center">
            <!-- <el-button type="primary" link @click="detail(scope.row.id)">
              <Icon icon="ep:edit" />
              修改
            </el-button> -->
            <el-button type="danger" link @click="deleted(scope.row.id)">
              <Icon icon="ep:delete" />
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
  <SubmitAuditFrom ref="submitAuditRef" @success="getList"></SubmitAuditFrom>
  <update ref="updateRef" />
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import Update from '@/views/audio/update.vue'
import * as audioApi from '@/api/audio'
import router from '@/router'
import SubmitAuditFrom from '@/views/resource/meta/SubmitAuditFrom.vue'
import { ElMessage } from 'element-plus'
import { DICT_TYPE } from '@/utils/dict'

const updateRef = ref<any>()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryFormRef = ref<any>()
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  createTime: [],
  auditStatus: [10],
  mark: undefined,
  pid: 0
})
const selectedItems = ref([])
const submitAuditRef = ref()
const handleSelectionChange = (row) => {
  selectedItems.value = row
}
const unRelease = async () => {
  if (selectedItems.value.length == 0 || selectedItems.value.length > 10) {
    ElMessage.warning('请选择要取消发布的数据!')
    return
  }
  let ids = []
  selectedItems.value.forEach((res) => {
    ids.push(res.id)
  })
  await audioApi.unRelease(ids)
  await getList()
  // if (ids.length > 0) {
  //   await metaApi.auditing(id, ids)
  // }
  // await getList()
}
// 下钻图集
const handleFolderClick = (rowData) => {
  console.log(rowData)
  queryParams.pid = rowData.id
  getList()
}
const handleQuery = () => {
  getList()
}
const message = useMessage()
const deleted = async (rid) => {
  try {
    await message.confirm('确定删除该条数据吗？')
    let ids = []
    ids.push(rid)
    await audioApi.deleted(ids)
    await getList()
  } catch {}
}
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const getList = async () => {
  loading.value = true
  try {
    const data = await audioApi.page(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const openAudioUpload = () => {
  updateRef.value.openDialog()
}
const detail = (id) => {
  updateRef.value.openUpdateDialog(id)
}
// 批量删除
const handleDelete = async () => {
  console.log(selectedItems.value)
  if (selectedItems.value.length == 0 || selectedItems.value.length > 10) {
    ElMessage.warning('请选择要删除的数据!')
    return
  }
  try {
    await message.confirm('确定删除资源吗？')
    let ids = []
    selectedItems.value.forEach((res) => ids.push(res.id))
    await audioApi.deleted(ids)
    await getList()
  } catch {}
}
//资源回收站
const recycle = () => {
  router.push({
    path: '/resource/audio/recycle'
  })
}
// 从图集返回上一层
const handleReturn = () => {
  // delete queryParams.pid
  queryParams.pid = 0
  getList()
}
provide('getList', getList)

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.document-box {
  cursor: pointer;
  max-width: 300px;
  max-height: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  color: #f5617f;
}
</style>
